<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<block slot="content">场所隐患排查记录</block>
			</cu-custom>
			<view class="compenlist">
				<view class="li">
					<view class="top">
						{{titleData.placeName}}
					</view>
					<view class="h3">
						<view class="midle">
							{{titleData.address}}
						</view>
						<text>流水号：{{titleData.serialNumber}}</text>
					</view>
					<view class="bottom">
						<span>新增隐患：{{titleData.checkNum}}</span>
						<span>复查隐患：{{titleData.reviewNum}}</span>
						<span>整改隐患：{{titleData.rectifyNum}}</span>
					</view>
					<view class="h2">检查时间:{{titleData.finishTime == null ? '' : titleData.finishTime}}<span>{{titleData.status == 0 ? '排查中' : '已完成'}}</span></view>
				</view>
			</view>
			<view class="paichalistbox">
				<view class="paichalist">
					<view class="h6">
						隐患排查情况
					</view>
					<view class="ul">
						<view class="li animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.05 + 's'}]" v-for="(item,index) in formlist" :key="index">
							<view class="left">
								<view class="h5 margin-bottom">{{item.dangerDesc}}</view>
								<view class="h4 margin-bottom">新增隐患：{{item.createTime}}</view>
								<view class="h4 margin-bottom">{{item.level}}级隐患，整改期限：{{item.deadline == null ? '' : item.deadline + '天'}}</view>
								<view class="posifiex">{{item.score}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部 -->
			<view class="fixedbottm">
				<view class="two">
					<span :class="[titleData.status != 0 ? 'blue' : 'red' ]">{{titleData.status != 0 ? '本轮排查已完成' : '本轮未完成'}}</span>
				</view>
			</view>
		</scroll-view>
	</view>

</template>

<script>
	import server from '@/api/server.js'

	export default {
		components: {

		},
		data() {
			return {
				items: ['隐患排查情况', '工作照片（签名）'],
				current: 0,
				modalName: null,
				titleData:[],
				formlist: [],
				// 表单数据

			}
		},
		mounted() {
			this.getToptail()
			this.getDetail()
		},
		methods: {
			getToptail() {
				server.checkqueryById({
					id: this.$root.$mp.query.id
				}).then(res => {
					console.log(res)
					 this.titleData = res.data.result
				})
			},
			getDetail() {
				server.listByPlace({
					checkId: this.$root.$mp.query.checkId,
					dangerDesc: ''
				}).then(res => {
					console.log(res)
					this.formlist = res.data.result.data
				})
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.compenlist {
		.li {
			background: white;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
			padding: 10px;

			.top {
				color: red;
				font-size: 18px;
				margin-bottom: 20px;

				.h6 {
					color: #007aff;
				}

				.h5 {
					color: #d372f1;
				}
			}

			.h3 {
				font-size: 16px;
				color: #999;

				.midle {
					margin-bottom: 10px;
				}

			}

			.bottom {
				display: flex;
				justify-content: space-between;
				font-size: 16px;
				color: #999;
				margin: 15px 0;
			}

			.h2 {
				margin-bottom: 10px;
				text-align: center;
				font-size: 18px;
				font-weight: bold;
				color: #999;
				display: flex;
				align-items: center;

				span {
					border: 1px solid #0dd239;
					padding: 2px 6px;
					font-size: 12px;
					color: #0dd239;
					border-radius: 30px;
					margin-left: 5px;
				}
			}
		}
	}

	.fixedbottm {
		display: flex;
		padding: 10px 0;
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: white;

		.two {
			width: 100%;
			float: left;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			justify-content: space-evenly;

			span {
				padding: 8px 25px;
				border-radius: 30px;
			}
			.blue{
				background-color: #0081ff;
			}
			.red{
				background-color: red;
			}

		}
	}

	.page,scroll-view {
		padding-bottom: 100px;
	}

	.paichalistbox {
		padding: 5px;

		.paichalist {
			margin-top: 5px;
			float: left;
			width: 100%;

			.h6 {
				font-size: 18px;
				border-bottom: 1px solid #ccc;
				padding: 10px;
				background: white;
			}

			.ul {
				width: 100%;
				float: left;

				.li {
					float: left;
					padding: 10px;
					width: 100%;
					background: white;
					margin-bottom: 5px;
					position: relative;

					.left {
						width: 80%;
						float: left;

						.h5 {
							font-size: 16px;
						}

						.h4 {
							font-size: 15px;
							color: #999;
						}

						.margin-bottom {
							margin-bottom: 10px;
						}

						.posifiex {
							position: absolute;
							right: 10px;
							top: 10px;
							font-size: 15px;
							color: red;
						}
					}
				}
			}
		}

	}
</style>
